<template>
  <!-- v-loading="oneLoading" -->
  <div class="history" id="history">
    <div
      class="parent"
      v-loading="oneLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 0.8)"
    >
      <div class="item" id="one"></div>
    </div>
    <div
      class="parent"
      v-loading="twoLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 0.8)"
    >
      <div class="item" id="two"></div>
    </div>
    <div
      class="parent"
      v-loading="threeLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 0.8)"
    >
      <div class="item" id="three"></div>
    </div>
    <div
      class="parent"
      v-loading="fourLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 0.8)"
    >
      <div class="item" id="four"></div>
    </div>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script type="text/javascript">
import echarts from "echarts";
import axios from "@/utils/axios";
export default {
  data() {
    return {
      //图表实例
      oneLoading: true,
      twoLoading: true,
      threeLoading: true,
      fourLoading: true,
      oneChart: null,
      twoChart: null,
      threeChart: null,
      fourChart: null,
      oneData: [
        // { value: 335, name: "直接访问" },
        // { value: 310, name: "邮件营销" },
        // { value: 274, name: "联盟广告" },
        // { value: 235, name: "视频广告" },
        // { value: 400, name: "搜索引擎" }
      ],
      twoData: {
        // dataBJ: [
        //   [1, 55, 9, 56, 0.46, 18, 6, "良"],
        //   [2, 25, 11, 21, 0.65, 34, 9, "优"],
        //   [3, 56, 7, 63, 0.3, 14, 5, "良"],
        //   [4, 33, 7, 29, 0.33, 16, 6, "优"],
        //   [5, 42, 24, 44, 0.76, 40, 16, "优"],
        //   [6, 82, 58, 90, 1.77, 68, 33, "良"],
        //   [7, 74, 49, 77, 1.46, 48, 27, "良"],
        //   [8, 78, 55, 80, 1.29, 59, 29, "良"],
        //   [9, 267, 216, 280, 4.8, 108, 64, "重度污染"],
        //   [10, 185, 127, 216, 2.52, 61, 27, "中度污染"],
        //   [11, 39, 19, 38, 0.57, 31, 15, "优"],
        //   [12, 41, 11, 40, 0.43, 21, 7, "优"],
        //   [13, 64, 38, 74, 1.04, 46, 22, "良"],
        //   [14, 108, 79, 120, 1.7, 75, 41, "轻度污染"],
        //   [15, 108, 63, 116, 1.48, 44, 26, "轻度污染"],
        //   [16, 33, 6, 29, 0.34, 13, 5, "优"],
        //   [17, 94, 66, 110, 1.54, 62, 31, "良"],
        //   [18, 186, 142, 192, 3.88, 93, 79, "中度污染"],
        //   [19, 57, 31, 54, 0.96, 32, 14, "良"],
        //   [20, 22, 8, 17, 0.48, 23, 10, "优"],
        //   [21, 39, 15, 36, 0.61, 29, 13, "优"],
        //   [22, 94, 69, 114, 2.08, 73, 39, "良"],
        //   [23, 99, 73, 110, 2.43, 76, 48, "良"],
        //   [24, 31, 12, 30, 0.5, 32, 16, "优"],
        //   [25, 42, 27, 43, 1, 53, 22, "优"],
        //   [26, 154, 117, 157, 3.05, 92, 58, "中度污染"],
        //   [27, 234, 185, 230, 4.09, 123, 69, "重度污染"],
        //   [28, 160, 120, 186, 2.77, 91, 50, "中度污染"],
        //   [29, 134, 96, 165, 2.76, 83, 41, "轻度污染"],
        //   [30, 52, 24, 60, 1.03, 50, 21, "良"],
        //   [31, 46, 5, 49, 0.28, 10, 6, "优"]
        // ],
        // dataGZ: [
        //   [1, 26, 37, 27, 1.163, 27, 13, "优"],
        //   [2, 85, 62, 71, 1.195, 60, 8, "良"],
        //   [3, 78, 38, 74, 1.363, 37, 7, "良"],
        //   [4, 21, 21, 36, 0.634, 40, 9, "优"],
        //   [5, 41, 42, 46, 0.915, 81, 13, "优"],
        //   [6, 56, 52, 69, 1.067, 92, 16, "良"],
        //   [7, 64, 30, 28, 0.924, 51, 2, "良"],
        //   [8, 55, 48, 74, 1.236, 75, 26, "良"],
        //   [9, 76, 85, 113, 1.237, 114, 27, "良"],
        //   [10, 91, 81, 104, 1.041, 56, 40, "良"],
        //   [11, 84, 39, 60, 0.964, 25, 11, "良"],
        //   [12, 64, 51, 101, 0.862, 58, 23, "良"],
        //   [13, 70, 69, 120, 1.198, 65, 36, "良"],
        //   [14, 77, 105, 178, 2.549, 64, 16, "良"],
        //   [15, 109, 68, 87, 0.996, 74, 29, "轻度污染"],
        //   [16, 73, 68, 97, 0.905, 51, 34, "良"],
        //   [17, 54, 27, 47, 0.592, 53, 12, "良"],
        //   [18, 51, 61, 97, 0.811, 65, 19, "良"],
        //   [19, 91, 71, 121, 1.374, 43, 18, "良"],
        //   [20, 73, 102, 182, 2.787, 44, 19, "良"],
        //   [21, 73, 50, 76, 0.717, 31, 20, "良"],
        //   [22, 84, 94, 140, 2.238, 68, 18, "良"],
        //   [23, 93, 77, 104, 1.165, 53, 7, "良"],
        //   [24, 99, 130, 227, 3.97, 55, 15, "良"],
        //   [25, 146, 84, 139, 1.094, 40, 17, "轻度污染"],
        //   [26, 113, 108, 137, 1.481, 48, 15, "轻度污染"],
        //   [27, 81, 48, 62, 1.619, 26, 3, "良"],
        //   [28, 56, 48, 68, 1.336, 37, 9, "良"],
        //   [29, 82, 92, 174, 3.29, 0, 13, "良"],
        //   [30, 106, 116, 188, 3.628, 101, 16, "轻度污染"],
        //   [31, 118, 50, 0, 1.383, 76, 11, "轻度污染"]
        // ],
        // dataSH: [
        //   [1, 91, 45, 125, 0.82, 34, 23, "良"],
        //   [2, 65, 27, 78, 0.86, 45, 29, "良"],
        //   [3, 83, 60, 84, 1.09, 73, 27, "良"],
        //   [4, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
        //   [5, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
        //   [6, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
        //   [7, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
        //   [8, 89, 65, 78, 0.86, 51, 26, "良"],
        //   [9, 53, 33, 47, 0.64, 50, 17, "良"],
        //   [10, 80, 55, 80, 1.01, 75, 24, "良"],
        //   [11, 117, 81, 124, 1.03, 45, 24, "轻度污染"],
        //   [12, 99, 71, 142, 1.1, 62, 42, "良"],
        //   [13, 95, 69, 130, 1.28, 74, 50, "良"],
        //   [14, 116, 87, 131, 1.47, 84, 40, "轻度污染"],
        //   [15, 108, 80, 121, 1.3, 85, 37, "轻度污染"],
        //   [16, 134, 83, 167, 1.16, 57, 43, "轻度污染"],
        //   [17, 79, 43, 107, 1.05, 59, 37, "良"],
        //   [18, 71, 46, 89, 0.86, 64, 25, "良"],
        //   [19, 97, 71, 113, 1.17, 88, 31, "良"],
        //   [20, 84, 57, 91, 0.85, 55, 31, "良"],
        //   [21, 87, 63, 101, 0.9, 56, 41, "良"],
        //   [22, 104, 77, 119, 1.09, 73, 48, "轻度污染"],
        //   [23, 87, 62, 100, 1, 72, 28, "良"],
        //   [24, 168, 128, 172, 1.49, 97, 56, "中度污染"],
        //   [25, 65, 45, 51, 0.74, 39, 17, "良"],
        //   [26, 39, 24, 38, 0.61, 47, 17, "优"],
        //   [27, 39, 24, 39, 0.59, 50, 19, "优"],
        //   [28, 93, 68, 96, 1.05, 79, 29, "良"],
        //   [29, 188, 143, 197, 1.66, 99, 51, "中度污染"],
        //   [30, 174, 131, 174, 1.55, 108, 50, "中度污染"],
        //   [31, 187, 143, 201, 1.39, 89, 53, "中度污染"]
        // ]
      },
      threeData: [
        // [
        //   [28604, 77, 17096869, "Australia", 1990],
        //   [31163, 77.4, 27662440, "Canada", 1990],
        //   [1516, 68, 1154605773, "China", 1990],
        //   [13670, 74.7, 10582082, "Cuba", 1990],
        //   [28599, 75, 4986705, "Finland", 1990],
        //   [29476, 77.1, 56943299, "France", 1990],
        //   [31476, 75.4, 78958237, "Germany", 1990],
        //   [28666, 78.1, 254830, "Iceland", 1990],
        //   [1777, 57.7, 870601776, "India", 1990],
        //   [29550, 79.1, 122249285, "Japan", 1990],
        //   [2076, 67.9, 20194354, "North Korea", 1990],
        //   [12087, 72, 42972254, "South Korea", 1990],
        //   [24021, 75.4, 3397534, "New Zealand", 1990],
        //   [43296, 76.8, 4240375, "Norway", 1990],
        //   [10088, 70.8, 38195258, "Poland", 1990],
        //   [19349, 69.6, 147568552, "Russia", 1990],
        //   [10670, 67.3, 53994605, "Turkey", 1990],
        //   [26424, 75.7, 57110117, "United Kingdom", 1990],
        //   [37062, 75.4, 252847810, "United States", 1990]
        // ],
        // [
        //   [44056, 81.8, 23968973, "Australia", 2015],
        //   [43294, 81.7, 35939927, "Canada", 2015],
        //   [13334, 76.9, 1376048943, "China", 2015],
        //   [21291, 78.5, 11389562, "Cuba", 2015],
        //   [38923, 80.8, 5503457, "Finland", 2015],
        //   [37599, 81.9, 64395345, "France", 2015],
        //   [44053, 81.1, 80688545, "Germany", 2015],
        //   [42182, 82.8, 329425, "Iceland", 2015],
        //   [5903, 66.8, 1311050527, "India", 2015],
        //   [36162, 83.5, 126573481, "Japan", 2015],
        //   [1390, 71.4, 25155317, "North Korea", 2015],
        //   [34644, 80.7, 50293439, "South Korea", 2015],
        //   [34186, 80.6, 4528526, "New Zealand", 2015],
        //   [64304, 81.6, 5210967, "Norway", 2015],
        //   [24787, 77.3, 38611794, "Poland", 2015],
        //   [23038, 73.13, 143456918, "Russia", 2015],
        //   [19360, 76.5, 78665830, "Turkey", 2015],
        //   [38225, 81.4, 64715810, "United Kingdom", 2015],
        //   [53354, 79.1, 321773631, "United States", 2015]
        // ]
      ],
      fourData: {
        // time: ["12月", "1月", "2月", "3月", "4月", "5月", "6月"],
        // one: [66.0, 76.9, 88.0, 99.2, 99.6, 99.7, 99.6],
        // two: [82.6, 81.9, 81.0, 72.4, 82.7, 92.7, 71.6]
      }
    };
  },
  created() {},
  mounted() {
    axios
      .get("/history/one")
      .then(res => {
        this.oneData = JSON.parse(res.data.data);
        this.one(this.oneData);
        this.oneLoading = false;
      })
      .catch(err => {
        console.log(err, "++++++++++++");
      });

    axios
      .get("/history/two")
      .then(res => {
        this.twoData = JSON.parse(res.data.data);
        this.two(this.twoData);
        this.twoLoading = false;
      })
      .catch(err => {
        console.log(err, "++++++++++++");
      });

    axios
      .get("/history/three")
      .then(res => {
        this.threeData = JSON.parse(res.data.data);
        this.three(this.threeData);
        this.threeLoading = false;
      })
      .catch(err => {
        console.log(err, "++++++++++");
      });

    axios
      .get("/history/four")
      .then(res => {
        this.fourData = JSON.parse(res.data.data);
        this.four(this.fourData);
        this.fourLoading = false;
      })
      .catch(err => {
        console.log(err, "+++++++++++++");
      });

    window.onresize = this.resize;
  },
  methods: {
    resize() {
      if (this.oneChart) {
        this.oneChart.resize();
      }
      if (this.twoChart) {
        this.twoChart.resize();
      }
      if (this.threeChart) {
        this.threeChart.resize();
      }
      if (this.fourChart) {
        this.fourChart.resize();
      }
    },
    one(data) {
      var myChart = echarts.init(document.getElementById("one")); //初始化echarts实例
      this.oneChart = myChart; //将实例公共化
      var option = {
        backgroundColor: "#2c343c",
        title: {
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: data.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)"
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };

      myChart.setOption(option); //使用配置项并且显示图表
    },
    two(data) {
      var myChart = echarts.init(document.getElementById("two")); //初始化echarts实例
      this.twoChart = myChart;

      var dataBJ = data.dataBJ;

      var dataGZ = data.dataGZ;

      var dataSH = data.dataSH;

      var schema = [
        { name: "date", index: 0, text: "日" },
        { name: "AQIindex", index: 1, text: "AQI指数" },
        { name: "PM25", index: 2, text: "PM2.5" },
        { name: "PM10", index: 3, text: "PM10" },
        { name: "CO", index: 4, text: "一氧化碳（CO）" },
        { name: "NO2", index: 5, text: "二氧化氮（NO2）" },
        { name: "SO2", index: 6, text: "二氧化硫（SO2）" }
      ];

      var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)"
      };

      var option = {
        backgroundColor: "#2c343c",
        color: ["#dd4444", "#fec42c", "#80F1BE"],
        legend: {
          top: 10,
          data: ["北京", "上海", "广州"],
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        grid: {
          left: "10%",
          right: 150,
          top: "18%",
          bottom: "10%"
        },
        tooltip: {
          padding: 10,
          backgroundColor: "#222",
          borderColor: "#777",
          borderWidth: 1,
          formatter: function(obj) {
            var value = obj.value;
            return (
              '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
              obj.seriesName +
              " " +
              value[0] +
              "日：" +
              value[7] +
              "</div>" +
              schema[1].text +
              "：" +
              value[1] +
              "<br>" +
              schema[2].text +
              "：" +
              value[2] +
              "<br>" +
              schema[3].text +
              "：" +
              value[3] +
              "<br>" +
              schema[4].text +
              "：" +
              value[4] +
              "<br>" +
              schema[5].text +
              "：" +
              value[5] +
              "<br>" +
              schema[6].text +
              "：" +
              value[6] +
              "<br>"
            );
          }
        },
        xAxis: {
          type: "value",
          name: "日期",
          nameGap: 16,
          nameTextStyle: {
            color: "#fff",
            fontSize: 14
          },
          max: 31,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        yAxis: {
          type: "value",
          name: "AQI指数",
          nameLocation: "end",
          nameGap: 20,
          nameTextStyle: {
            color: "#fff",
            fontSize: 16
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          splitLine: {
            show: false
          }
        },
        visualMap: [
          {
            left: "right",
            top: "10%",
            dimension: 2,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ["圆形大小：PM2.5"],
            textGap: 30,
            textStyle: {
              color: "#fff"
            },
            inRange: {
              symbolSize: [10, 70]
            },
            outOfRange: {
              symbolSize: [10, 70],
              color: ["rgba(255,255,255,.2)"]
            },
            controller: {
              inRange: {
                color: ["#c23531"]
              },
              outOfRange: {
                color: ["#444"]
              }
            }
          },
          {
            left: "right",
            bottom: "5%",
            dimension: 6,
            min: 0,
            max: 50,
            itemHeight: 120,

            precision: 0.1,
            text: ["明暗：二氧化硫"],
            textGap: 30,
            textStyle: {
              color: "#fff"
            },
            inRange: {
              colorLightness: [1, 0.5]
            },
            outOfRange: {
              color: ["rgba(255,255,255,.2)"]
            },
            controller: {
              inRange: {
                color: ["#c23531"]
              },
              outOfRange: {
                color: ["#444"]
              }
            }
          }
        ],
        series: [
          {
            name: "北京",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataBJ
          },
          {
            name: "上海",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataSH
          },
          {
            name: "广州",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataGZ
          }
        ]
      };

      myChart.setOption(option); //使用配置项并且显示图表
    },
    three(data) {
      var myChart = echarts.init(document.getElementById("three")); //初始化echarts实例
      this.threeChart = myChart; //将实例公共化

      var option = {
        backgroundColor: "#2c343c",
        title: {
          text: "1990 与 2015 年各国家人均寿命与 GDP",
          textStyle: {
            color: "#ccc"
          }
        },
        legend: {
          right: 10,
          data: ["1990", "2015"],
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          scale: true
        },
        series: [
          {
            name: "1990",
            data: data[0],
            type: "scatter",
            symbolSize: function(data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              label: {
                show: true,
                formatter: function(param) {
                  return param.data[3];
                },
                position: "top"
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(120, 36, 50, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(251, 118, 123)"
                },
                {
                  offset: 1,
                  color: "rgb(204, 46, 72)"
                }
              ])
            }
          },
          {
            name: "2015",
            data: data[1],
            type: "scatter",
            symbolSize: function(data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              label: {
                show: true,
                formatter: function(param) {
                  return param.data[3];
                },
                position: "top"
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(25, 100, 150, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(129, 227, 238)"
                },
                {
                  offset: 1,
                  color: "rgb(25, 183, 207)"
                }
              ])
            }
          }
        ]
      };

      myChart.setOption(option);
    },
    four(data) {
      var myChart = echarts.init(document.getElementById("four")); //初始化echarts实例
      this.fourChart = myChart; //将实例公共化
      var option = {
        backgroundColor: "#2c343c",
        title: {
          text: "某地区治愈率和感染率",
          textStyle: {
            color: "#ccc"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["治愈率", "感染率"],
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: data.time,
            axisLine: {
              lineStyle: {
                color: "#eee"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#eee"
              }
            }
          }
        ],
        series: [
          {
            name: "治愈率",
            type: "bar",
            data: data.one,

            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            },
            itemStyle: {
              color: "#91c7ae"
            }
          },
          {
            name: "感染率",
            type: "bar",
            data: data.two,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            },
            itemStyle: {
              color: "#c23531"
            }
          }
        ]
      };

      myChart.setOption(option); //使用配置项并且显示图表
    }
  }
};
</script>
<style scope>
.history {
  height: calc(100vh - 50px);
  /* height: 100vh; */
  background-color: #2c343c;
}
.parent {
  width: 50%;
  height: 50%;
  background-color: #2c343c;
  float: left;
}
.item {
  width: 100%;
  height: 100%;
}
</style>